<template>
  <div class="app-container">
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon">
            <div class="total-title">今日订单总数</div>
            <div class="total-value">{{dataObj&&dataObj.dayOrder}}
</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon">
            <div class="total-title">今日销售总额</div>
            <div class="total-value">￥{{dataObj&&dataObj.dayPay}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon">
            <div class="total-title">昨日销售总额</div>
            <div class="total-value">￥{{dataObj&&dataObj.yesterdayPay}}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon">
            <div class="total-title">近7天销售总额</div>
            <div class="total-value">￥{{dataObj&&dataObj.sevenPay}}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="un-handle-layout">
      <div class="layout-title">各类型订单数量</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger">({{productStatus&&productStatus.toBePaid}})</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="un-handle-item">
              <span class="font-medium">已付款订单</span>
              <span style="float: right" class="color-danger">({{productStatus&&productStatus.paid}})</span>
            </div>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="un-handle-item">
              <span class="font-medium">已完成订单</span>
              <span style="float: right" class="color-danger">({{productStatus&&productStatus.completion}})</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="un-handle-item">
              <span class="font-medium">已取消订单</span>
              <span style="float: right" class="color-danger">({{productStatus&&productStatus.cancel}})</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="un-handle-item">
              <span class="font-medium">退货中订单</span>
              <span style="float: right" class="color-danger">({{productStatus&&productStatus.rejecting}})</span>
            </div>
          </el-col>

        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{productNew&&productNew.cancel}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{productNew&&productNew.onsale}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{productNew&&productNew.completion}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{productNew&&productNew.reviewing}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">交易成功</el-col>
                <el-col :span="6" class="overview-item-title">审核中</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{addData&&addData.newToday}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{addData&&addData.newYesterday}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{addData&&addData.newMonth}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{addData&&addData.all}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">订单统计</div>
      <el-row>
        <el-col :span="4">
          <div style="padding: 20px">
            <div>
              <div style="color: #909399;font-size: 14px">本月订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{chartOtherData&&chartOtherData.monthCount}}</div>
              <!-- <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div> -->
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周订单总数</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{chartOtherData&&chartOtherData.weekCount}}</div>
              <!-- <div>
                <span class="color-danger" style="font-size: 14px">-10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div> -->
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本月销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{chartOtherData&&chartOtherData.monthQuota}}</div>
              <!-- <div>
                <span class="color-success" style="font-size: 14px">+10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
              </div> -->
            </div>
            <div style="margin-top: 20px;">
              <div style="color: #909399;font-size: 14px">本周销售总额</div>
              <div style="color: #606266;font-size: 24px;padding: 10px 0">{{chartOtherData&&chartOtherData.weekQuota}}</div>
              <!-- <div>
                <span class="color-danger" style="font-size: 14px">-10%</span>
                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
              </div> -->
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="border-left:1px solid #DCDFE6;margin-right: 10px;">
            <div>
              <ve-line
                :data="chartData"
                :legend-visible="false"
                :loading="loading"
                :data-empty="dataEmpty"
                :settings="chartSettings"></ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {str2Date} from '@/utils/date';
  import img_home_order from '@/assets/images/home_order.png';
  import img_home_today_amount from '@/assets/images/home_today_amount.png';
  import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
  import {getProductInfo,getUserAdd,getProductOverview} from '@/api/product.js'
  import {getOrderStatic,getOrderTypeCount} from '@/api/order.js';
  import {getSevenStatistics} from '@/api/homeSubject.js'
  const DATA_FROM_BACKEND = {
    columns: ['date', 'orderCount'],
    rows: [
      {date: '2018-11-01', orderCount: 10},
      {date: '2018-11-02', orderCount: 20},
      {date: '2018-11-03', orderCount: 33},
      {date: '2018-11-04', orderCount: 50},
      {date: '2018-11-05', orderCount: 80},
      {date: '2018-11-06', orderCount: 60},
      {date: '2018-11-07', orderCount: 20},
    ]
  };
  export default {
    name: 'home',
    data() {
      return {
        dataObj:{},
        addData:{},
        productNew:{},
        chartOtherData:{},
        productStatus:{},
        orderCountDate: '',
        chartSettings: {
          xAxisType: 'time',
          area:true,
        labelMap: {'orderCount': '销售额'}},
        chartData: {
          columns: [],
          rows: []
        },
        loading: false,
        dataEmpty: true,
        img_home_order,
        img_home_today_amount,
        img_home_yesterday_amount
      }
    },
    created(){
      this.initOrderCountDate();
      this.getData();
    },
    beforeMount(){
      getProductInfo().then((res)=>{
        if(res.code===200){
          this.dataObj=res.data
        }
      })
      getUserAdd().then((res)=>{
        if(res.code===200){
          this.addData=res.data
        }
      })
      getProductOverview().then((res)=>{
        if(res.code===200){
          this.productNew=res.data
        }
      })
      getOrderStatic().then((res)=>{
        if(res.code===200){
          this.chartOtherData=res.data
        }
      })
      getOrderTypeCount().then((res)=>{
        if(res.code===200){
          this.productStatus=res.data
        }
      })
      getSevenStatistics().then((res)=>{
        if(res.code===200){
          if(res.data.quota){
            let i=0;
            let j=6;
            let date=new Date();
            let nowDate=date.getDate();
            res.data.quota.forEach((val)=>{
              let items=DATA_FROM_BACKEND.rows[i++];
              items.orderCount=val;
              items.date=`${date.getFullYear()}-${date.getMonth()+1}-${nowDate-j}`
              j-=1;
            })
          }
        }
      })
    },
    methods:{
      handleDateChange(){
        this.getData();

      },
      initOrderCountDate(){
        let start = new Date();
        start.setFullYear(2018);
        start.setMonth(10);
        start.setDate(1);
        const end = new Date();
        end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
        this.orderCountDate=[start,end];
      },
      getData(){
        setTimeout(() => {
          this.chartData = {
            columns: ['date', 'orderCount'],
            rows: []
          };
          for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
            let item=DATA_FROM_BACKEND.rows[i];
            let currDate=str2Date(item.date);
            let start=this.orderCountDate[0];
            let end=this.orderCountDate[1];
            this.chartData.rows.push(item);
          }
          this.dataEmpty = false;
          this.loading = false

        }, 1000)
      }
    }
  }
</script>

<style scoped>
  .app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
  }

  .address-layout {
  }

  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 70px;
    top: -50px;
  }

  .total-value {
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -40px;
  }

  .un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .un-handle-content {
    padding: 20px 40px;
  }

  .un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }
  .mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
  }
  .address-content{
    padding: 20px;
    font-size: 18px
  }
</style>
